<div>
    <x-mini-header>
        <x-slot name="url">{{ route('categories.index') }}</x-slot>
        <x-slot name="title">{{ $special->title }}</x-slot>

        <div class="flex gap-2 text-center text-lg font-semibold shadow" wire:ignore>
            <a wire:navigate href="{{ request()->fullUrlWithoutQuery('sortBy') }}" @class(['p-2 flex-1', 'text-red-500 border-b-2 border-red-500'=> request()->missing('sortBy')])>最新</a>
            <a wire:navigate href="{{ request()->fullUrlWithQuery(['sortBy' => 'hot']) }}" @class(['p-2 flex-1', 'text-red-500 border-b-2 border-red-500' => request('sortBy') === 'hot'])>热门</a>
        </div>
    </x-mini-header>

    @if($collection->isEmpty())
        @include('partials.oops')
    @else
        <div class="grid grid-cols-2 gap-2 px-2 my-2">
            @foreach($collection as $v)
                <x-video-item :video="$v" :key="$v->id"/>
            @endforeach
        </div>

        @includeWhen($hasMorePages, 'partials.load-more')
    @endif
</div>
